<template>
    <div class="center">
      <div class="head">
        <div
          style="display: flex; justify-content: space-around"
          v-for="(item, index) in list"
          :key="index"
        >
          <div class="yuan" :class="{ 'yuan': true, 'special-margin': index === 2 }">
            <img :src="item.img" class="one"></img>
          </div>
          <div class="text">
           <div style="display: flex;">
            <div :class="{'special-margin2': index === 2 }">{{ item.name }}</div>
             <div class="tip" v-if="item.name == '食堂数 （个）'">
         </div>
           </div>
            <div style="font-size: 36px; color: #00fffa">
              <count-to ref="countTo" :duration="3600" :start-val="0" :end-val="item.num"></count-to
              >
              <!-- {{ item.unit }} -->
            </div>
          </div>
        </div>
      </div>
      <div class="centerMId">
        <div class="centerMIdTop">
            <div class="total">
               计算机：<span class="num"><countTo :start-val="0" :end-val="29694"></countTo></span> （台）
            </div>
            <div  class="total">
                多媒体：<span class="num"><countTo :start-val="0" :end-val="4932"></countTo></span> （台）
            </div>
            <div  class="total">
                图书：<span class="num">2368730</span> （本）
            </div>
        </div>
        <div class="dashed"></div>
        <div style="height: 196px;">
            <table-scroll-pro
          :data="tableDataA"
          :columns="columnsA"
          :class-option="classOption"
          :config="tablConfig"
        ></table-scroll-pro>
        </div>
        <div style="margin-top: 16px;" class="dashed"></div>
        <div style="height: 196px;">
            <table-scroll-pro
          :data="tableDataB"
          :columns="columnsB"
          :class-option="classOption"
          :config="tablConfig"
        ></table-scroll-pro>
        </div>
      </div>
      <div class="centerBottom">
            <itemBox3 title="功能教室">
                <div class="box">
                <div class="centerBottomLeft" v-for="item in classList">
                    <img style="width: 18px;height: 18px;margin-right: 14px;" :src="item.img" alt="">
                    <div class="house">{{ item.name }}:</div>
                    <div class="number">{{ item.num }}</div>个
                </div>
              </div>
            </itemBox3>
            <itemBox3 title="教学基础">
                <div class="box">
                <div class="centerBottomLeft" v-for="item in basisList">
                    <img style="width: 18px;height: 18px;margin-right: 14px;" :src="item.img" alt="">
                    <div style="width: 67px;" class="house">{{ item.name }}:</div>
                    <div class="number">{{ item.num }}</div>个
                </div>
              </div>
            </itemBox3>
            <itemBox3 title="厨房">
                <div class="box">
                <div class="centerBottomLeft" v-for="item in kitchenList">
                    <img style="width: 18px;height: 18px;margin-right: 14px;" :src="item.img" alt="">
                    <div style="width: 84px;" class="house">{{ item.name }}:</div>
                    <div class="number">{{ item.num }}</div>个
                </div>
              </div>
            </itemBox3>
      </div>
    </div>
  </template>
  <script>
  import drawMixin from "@/utils/drawMixin";
  let mixin = new drawMixin();
  import chart from "@/components/eChart";
  import scroll from "@/views/food/components/tableScroll/index.vue";
  import subTit from "../../components/subTit";
  import countTo from "vue-count-to";
  import itemBox from './itemBox.vue'
  import itemBox3 from './itemBox3.vue'
  export default {
    name: "index",
    components: { chart, scroll, subTit, countTo ,itemBox,itemBox3},
    mixins: [mixin],
    data() {
      return {
        interval: null,
        list: [
          {
            img: require('@/assets/img/icon1.svg'),
            name: "学校数 （所）",
            num: 343,
            unit: "所",
          },
          {
            img: require('@/assets/img/icon2.svg'),
            name: "学生数 （人）",
            num: 123458,
            unit: "个",
          },
          {
            img:require('@/assets/img/icon3.svg'),
            name: "班级数 （个）",
            num: 3103,
            unit: "人",
          },
          {
            img: require('@/assets/img/icon4.svg'),
            name: "教师数 （人）",
            num: 14148,
            unit: "家",
          },
          ],
          columnsA: [
        { label: "计算机/台", prop: "type", align: "center" },
        {
          label: "2023",
          prop: "2023",
          align: "center",
          width: 100,
          showOverflowTooltip: true,
        },
        { label: "2022", prop: "2022", align: "center" },
        { label: "2021", prop: "2021", align: "center" },
        { label: "2020", prop: "2020", align: "center" },
        { label: "2019", prop: "2019", align: "center" },
        { label: "2018", prop: "2018", align: "center" },
        { label: "2017", prop: "2017", align: "center" },
      ],
      tableDataA: [
        {
          type: "教师机",
          2023: `105`,
          2022: "533",
          2021: "159",
          2020: "937",
          2019: '1485',
          2018: '946',
          2017:'660'
          },
          {
          type: "学生机",
          2023: `0`,
          2022: "2375",
          2021: "353",
          2020: "2212",
          2019: '354',
          2018: '1540',
          2017:'1181'
          },
          {
          type: "其他",
          2023: `1071`,
          2022: "433",
          2021: "108",
          2020: "83",
          2019: '1368',
          2018: '188',
          2017:'372'
          },
          ],
          columnsB: [
        { label: "多媒体/台", prop: "type", align: "center" },
        {
          label: "2023",
          prop: "2023",
          align: "center",
          width: 100,
          showOverflowTooltip: true,
        },
        { label: "2022", prop: "2022", align: "center" },
        { label: "2021", prop: "2021", align: "center" },
        { label: "2020", prop: "2020", align: "center" },
        { label: "2019", prop: "2019", align: "center" },
        { label: "2018", prop: "2018", align: "center" },
        { label: "2017", prop: "2017", align: "center" },
      ],
      tableDataB: [
        {
          type: "智慧黑板",
          2023: `22`,
          2022: "555",
          2021: "272",
          2020: "142",
          2019: '109',
          2018: '58',
          2017:'75'
          },
          {
          type: "触控一体机",
          2023: `22`,
          2022: "555",
          2021: "272",
          2020: "142",
          2019: '109',
          2018: '58',
          2017:'75'
          },
          {
          type: "其他",
          2023: `150`,
          2022: "116",
          2021: "218",
          2020: "284",
          2019: '544',
          2018: '1110',
          2017:'44'
          },
      ],
      classOption: {
        limitMoveNum: 4,
        singleHeight: 46, // 单步运动停止的高度(默认值0是无缝不停止的滚动)
        waitTime: 2000, // 单步停止等待时间(默认值1000ms)
      },
      tablConfig: {
        rowHeight: 46 + "px",
        headerHeight: 46 + "px",
          },
          classList: [
              {
                  name: '计算机教室',
                  num: '3265',
                  img:require('@/assets/equipment/6.png')
              },
              {
                  name: '音乐教室',
                  num: '4384',
                  img:require('@/assets/equipment/7.png')
              },
              {
                  name: '美术教室',
                  num: '5492',
                  img:require('@/assets/equipment/8.png')
              },
              {
                  name: '实验室',
                  num: '6200',
                  img:require('@/assets/equipment/9.png')
              },

          ],
          basisList: [
              {
                  name: '课桌椅',
                  num: '77311',
                  img: require('@/assets/equipment/10.png')
              },
              {
                  name: '办公桌',
                  num: '2188',
                  img: require('@/assets/equipment/11.png')
              },
              {
                  name: '文件柜',
                  num: '5195',
                  img: require('@/assets/equipment/12.png')
              },
              {
                  name: '空调',
                  num: '331',
                  img: require('@/assets/equipment/13.png')
              },
          ],
          kitchenList: [
              {
                name: '餐桌',
                  num: '6272',
                  img: require('@/assets/equipment/14.png')
              },
              {
                name: '冰箱冰柜',
                  num: '435',
                  img: require('@/assets/equipment/15.png')
              },
              {
                name: '灶台',
                  num: '210',
                  img: require('@/assets/equipment/16.png')
              },
              {
                name: '操作台',
                  num: '597',
                  img: require('@/assets/equipment/17.png')
              },
              {
                name: '厨房货架',
                  num: '772',
                  img: require('@/assets/equipment/18.png')
              },
              {
                name: '其他设备',
                  num: '3676',
                  img: require('@/assets/equipment/20.png')
              },
              {
                name: '智能秤',
                  num: '39',
                  img: require('@/assets/equipment/19.png')
              },
          ]
      };
    },
    mounted () {
      this.handleStart()

    },
    beforeDestroy() {
        if (this.interval) {
          clearInterval(this.interval);
        }
      },
    methods: {
      handleStart(){
          if (this.interval) {
            clearInterval(this.interval)
          }
          this.interval = setInterval(() => {
            for (let i = 0; i < this.$refs.countTo.length; i++){
              this.$refs.countTo[i].start()
            }
          }, 8600) // 8.6 = 间隔5秒更新 + 数字动画3.6s
        },
    },
  };
  </script>
  <style lang="scss" scoped>
  @font-face {
  font-family: "LESLIE";
  src: url("~@/assets/food/LESLIEB.TTF");
}
  ::-webkit-scrollbar {
    /* 对应纵向滚动条的宽度 */
    width: 0px;
    /* 对应横向滚动条的宽度 */
    height: 1px;
    // padding-left: -100px;
  }

  /* 滚动条上的滚动滑块 */
  ::-webkit-scrollbar-thumb {
    background-color: #49b1f5;
    border-radius: 32px;
  }

  /* 滚动条轨道 */
  ::-webkit-scrollbar-track {
    background-color: rgba(3, 31, 73, 0.5);
    border-radius: 32px;
  }
  .center {
    margin-top: 10px;
    .head {
      display: flex;
      justify-content: space-between;
      margin-bottom: 24px;
      .yuan {
        position: relative;
        width: 72px;
        height: 72px;
        border-radius: 50%;
        background-image: url("~@/assets/food/yuan.svg");
        margin-right: 8px;

        .one {
          position: absolute;
          top: 18px;
          left: 20px;
          width: 32px;
          height: 32px;
        }
      }
      .special-margin {
    margin-left: 15px;
      }
  .special-margin2 {
    margin-right: 15px;
      }
      .text {
        display: flex;
        flex-direction: column;
        justify-content: space-around;
        font-size: 20px;
        position: relative;
      }
    }
    .centerMId {
        padding: 16px;
        margin-bottom: 24px;
        width: 888px;
        height: 536px;
        background: rgba(0,16,43,0.32);
        border: 1px solid;
    -o-border-image: linear-gradient(to bottom, rgba(8, 132, 255, 0.1), #0884ff) 1;
    border-image: -webkit-gradient(linear, left top, left bottom, from(rgba(8, 132, 255, 0.1)), to(#0884ff)) 1;
    border-image: linear-gradient(to bottom, rgba(8, 132, 255, 0.1), #0884ff) 1;
    .centerMIdTop {
        display: flex;
        justify-content: space-between;
        margin: 8px 0 16px;
        font-size: 18px;
        .total {
           display: flex;
           align-items: center;
        }
        .num {
            font-size: 30px;
            color: #00fffa;
            font-family: LESLIE;
        }
    }
    .dashed {
       width: 100%;
        height: 4px;
        background-image: url('~@/assets/equipment/dashed.png');
        background-size: cover;
        margin-bottom: 16px;
    }
    }

    .centerBottom {
        display: flex;
        justify-content: space-between;
            display: flex;
   .box {
    display: flex;
    height: 100%;
    justify-content: space-around;
    flex-direction: column;
    font-size: 16px;
    text-align: left;
    .centerBottomLeft {
            display: flex;
            // justify-content: space-evenly;
            align-items: center;
            padding-left: 20px;
            .house {
                width: 101px;
                text-align: left;
                margin: 0 4px 0 14px;
            }
          .number {
            width: 55px;
            font-size: 20px;
            color: #00fffa;
            margin-right: 10px;
          }

        }
   }


    }
  }
  </style>
